<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="./echart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
    <script src="./js/jq.js"></script>


</head>

<body class="pd12">
    <div class="top flex_x between">
       <a href="./Exploring.html"> <img class="left_icon" src="./static/image/left.png" alt=""></a>
        <span>Exploring </span>
       <a href="./search.html"> <img src="./static/image/2.svg" alt=""></a>
    </div>
    <div class="cont1 pd12 border_box">
        <div class="tops flex_x around">
            <div class="t_left font_blod font_24">Kuala Lumpur <br>
                Malaysia</div>
            <div class="t_right font_blod">RM 50</div>
        </div>
        <div class="b_c flex_x around">
            <span class="date mt_20">Jul 19 - Jul 16</span>
            <a href="./search.html"><div class="c_btn txt_center ">See flights</div></a>
        </div>
        <!-- <img class="mt_20" src="./static/image/Rectangle 8.png" alt=""> -->
        <div class="slider mt_20">
            <div class="slider-wrapper">
                <img class="" src="./static/image/Rectangle 8.png" alt=""> 
                <img class="" src="./static/image/1111.png" alt=""> 
            </div>
          </div>
    </div>
    <div class="flex_x between bg_ff pd12" style="border-radius: 12px 12px 0 0;">
    <div class="flex_x start">
        <span class="mr_20  Price color_red">Price</span>
        <span class=" Weather">Weather</span>
    </div>    
    <div class="flex_x end">
        <span class="squer"></span>
        <span class="quer_txt">Avrenger Price</span>
    </div>
    </div>
    <div id="main" style="width: 100%;height:300px;background: #FFF;border-radius: 0 0 12px 12px;"></div>
    <div id="main2" style="width: 100%;height:300px;background: #FFF;border-radius: 0 0 12px 12px;"></div>
</body>
<script>
    gsap.from(".top   img", {
        duration: .5,
        y: 300,
        x:0
    });
    setTimeout(() => {
        $('#main2').hide()
    }, 1000);
    $('.Price').click(function(){
        $(this).addClass('color_red')
        $('.Weather').removeClass('color_red')
        $('.quer_txt').html('Avrenger Price')
        $('#main').show()
        $('#main2').hide()
    })
    $('.Weather').click(function(){
        $(this).addClass('color_red')
        $('.Price').removeClass('color_red')
        $('.quer_txt').html('Average temperature')
        $('#main').hide()
        $('#main2').show()

    })
  
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    var option = {
        color: '#ff8906',
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            data: []
        },
        xAxis: {
            data: ["Jun", "Jul", "Aug", "Sep"]
        },
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    //Y轴数值可添加百分号
                    formatter: '{value}',
                },
            }
        ],
        series: [{
            name: '',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    var option2 = {
        color: '#ff8906',
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            data: []
        },
        xAxis: {
            data: ["Jun", "Jul", "Aug", "Sep"]
        },
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    //Y轴数值可添加百分号
                    formatter: '{value}',
                },
            }
        ],
        series: [{
            name: '',
            type: 'bar',
            data: [15, 20, 10, 5, 36, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart2.setOption(option2);
    function slider() {
  var wrapper = document.querySelector('.slider-wrapper');
  var images = document.querySelectorAll('.slider-wrapper img');
  var width = images[0].width+25;
  var count = images.length;
  var currentIndex = 0;
  setInterval(function() {
    currentIndex = (currentIndex + 1) % count;
    wrapper.style.transform = 'translateX(-' + width * currentIndex  + 'px)';
  }, 2000);
}
slider();
</script>
<style>
    .slider {
      width: 100%;
      overflow: hidden;
    }
    .slider-wrapper {
      width: 100%;
      display: flex;
      transition: transform 1s ease;
    }
    .slider-wrapper img {
      width: 100%;
      height: 100%;
    }
    .squer{
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #FF8906;
        margin-right: 6px;
    }
    .quer_txt{
        font-size: 8px;
    }
    .color_red{
       color:#FF8906
    }
    .color_cc{
        color: #999;
    }
    .cont1 img {
        width: 100%;
        height: 197px;
        flex-shrink: 0;
        border-radius: 10px;
    }

    .date {
        color: rgba(0, 0, 0, 0.60);
        text-align: center;
        font-size: 15px;
        display: inline-block;
    }

    .c_btn {
        width: 103px;
        height: 40px;
        line-height: 40px;
        flex-shrink: 0;
        border-radius: 10px;
        background: #FF8906;
    }

    .t_right {
        color: #FF8906;
        font-size: 24px;
    }

    .cont1 {
        width: 100%;
        border-radius: 10px;
        background: #FFF;
        margin: 20px auto;
    }

    .top {
        align-items: center;
    }

    .top img {
        width: 18px;
        height: 18px;
    }

    img.left_icon {
        width: var(--spacing-2, 8px);

        height: 11.692px;
    }
</style>

</html>